<template>
	<view class="dmm-container dmm-container-grey">
		<view class="section">
			<u--form labelPosition="left" labelWidth="170rpx">
				<u-form-item label="身份证号" borderBottom>
					<u--input v-model="idNo" type="text" placeholderStyle="color: #d7d7d7;" placeholder="请输入身份证号" border="none"></u--input>
				</u-form-item>
				<u-form-item label="手机号" borderBottom>
					<u--input :value="agentInfo.agentMobile" disabled placeholderStyle="color: #d7d7d7;" placeholder="请输入手机号" border="none"></u--input>
				</u-form-item>
				<u-form-item label="验证码" borderBottom>
					<view class="countdown" slot="right">
						<u-code :seconds="seconds"  @end="end" @start="start" ref="uCode" 
						@change="codeChange"></u-code>
						<u-button :disabled="countdownDisabled" @tap="getCode">{{tips}}</u-button>
					</view>
					<u--input v-model="verificationCode" placeholderStyle="color: #d7d7d7;" placeholder="请输入验证码" border="none"></u--input>
				</u-form-item>
			</u--form>
		</view>
		
		<u-button type="primary" text="确认并设置密码" :disabled="!couldSubmit" @click="verify({verificationCode, idNo}).then(() => uniHistory.push('/pages/setPassword/modifyPassword?isFirstSetPassword=true'))"></u-button>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex'
	
	export default {
		data() {
			return {
				idNo: '',
				verificationCode: '',
				tips: '',
				seconds: 60,
				countdownDisabled: false
			};
		},
		
		computed: {
			...mapState('home', ['agentInfo']),
			couldSubmit: function () {
				return !!(this.agentInfo.agentMobile && this.verificationCode && this.idNo)
			}
		},
		
		methods: {
			...mapActions('setPassword', ['verify', 'getVerCode']),
			
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					const {agentMobile: phoneNo} = this.agentInfo
					this.getVerCode(phoneNo).then(this.$refs.uCode.start)
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			
			start() {
				this.countdownDisabled = true
			},
			
			end() {
				this.countdownDisabled = false
			},
		},
		
		onLoad(options) {
			console.log(this.agentInfo.agentMobile)
		}
	}
</script>

<style lang="scss">
	.section {
		padding: 0;
		margin-bottom: 92rpx;
	}
	.u-form {
		.u-form-item {
			padding: 0 30rpx;
			/deep/ .u-form-item__body__left__content__label {
				font-size: $uni-font-size-base;
				color: $uni-text-color-muted;
			}
		}
		.u-input {
			height: 88rpx;
			background-color: #fff !important;
			/deep/ .uni-input-input {
				color: $uni-text-color;
				font-size: $uni-font-size-base;
			}
		}
		
		.countdown {
			/deep/ .u-button {
				height: 56rpx;
				line-height: 56rpx;
				width: 174rpx !important;
				padding: 0;
				margin: 0;
				font-size: 24rpx;
			}
		}
	}
	
	.u-button {
		width: 660rpx;
	}
	
</style>
